<!--
 * @Author: kangjia kjhangzhou@163.com
 * @Date: 2022-09-29 09:57:51
 * @LastEditors: kangjia kjhangzhou@163.com
 * @LastEditTime: 2022-09-29 13:25:53
 * @FilePath: \boss-web-applet\pages\service\buy\module\purchaseNotes.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<view class="cu-modal" :class="modalName=='PurchaseNotes' ? 'show':''" @touchmove.stop.prevent="()=>{return}" @tap="hideModal">
		<view class="cu-dialog" @tap.stop> 
			<view class="cu-bar bg-primary justify-end text-white">
				<!-- 购买须知 -->
				<view class="content">{{$t('JLink.buy.purchaseNotes')}}</view>
				<view class="action" @tap="hideModal">
					<text class="cuIcon-close text-white"></text>
				</view>
			</view>
			<view class="padding-top-sm text-left">
				<scroll-view :scroll-y="true" class="indexes" scroll-with-animation="true" :enable-back-to-top="true" :scroll-top="0" 
					:style="[{height:'calc(652upx - '+ CustomBar + 'upx - 78upx)'}]">
					<!-- <view class="text-black ulStyle" style="font-size:30upx;padding:0 40rpx 0 80rpx">
						<view>{{$t('JLink.purchaseNotes.content.one')}}</view>
						<view>{{$t('JLink.purchaseNotes.content.two')}}</view>
						<view class="text-bold">{{$t('JLink.purchaseNotes.content.three')}}</view>
						<view>{{$t('JLink.purchaseNotes.content.four')}}</view>
						<view>{{$t('JLink.purchaseNotes.content.five')}}</view>
					</view> -->
					<view  style="padding:0 20rpx 0 0" v-html="notes"></view>
				</scroll-view>
				<view class="cu-bar lg block">
					<view class="action margin-0 flex-sub " @tap="IKnown">
						<!-- 我知道 -->
						<text class="text-orange">{{$t('JLink.purchaseNotes.IKnown')}}({{Countdown}})</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let setIntervalFun;
export default {
    props:{
		modalName:{
		  type:String,
		  default:''
		},
		notes:{
			type:String,
			default:''
		}
		
	},
	data() {
	    return {
            Countdown: "", //购买须知15s倒计时
			scrollTop:0,
			CustomBar:0
			
		}
	},
	/**
	* 组件的属性列表
	*/
	beforeMount: function () {
		this.CustomBar=uni.getSystemInfoSync().statusBarHeight+45
	},
	methods: {
        handleIntervalTime(){
			this.handleClear();
			let sm = 15;
			this.Countdown = sm + 's';
			setIntervalFun = setInterval(() => {
				sm--;
				sm < 10 ? this.Countdown = '0' + sm + 's' : this.Countdown = sm + 's'
				if (sm <= 0) {
					this.hideModal();
				}
			}, 1000)
		},
		// '我知道'点击事件
		IKnown (){
			this.handleClear();
			this.$emit('IKnownClick')
		},
		// 清除定时器
		handleClear(){
			clearInterval(setIntervalFun);
		},
		// 取消事件
		hideModal (){
			this.handleClear();
			this.$emit('hideModal')
		}
	}
}
</script>
<style lang="less" scoped>
.ulStyle li:not(:last-child) {
  margin-bottom: 10upx
}
.ulStyle view::before{
	position: absolute;
	display: inline-block;
	content: '';
	width: 10rpx;
	height: 10rpx;
	background: #000;
	border-radius: 50%;
	left:40rpx;
	margin-top: 15rpx;
	
}
</style>
